<template>
  <div class="bg message-container">

    <!-- 数据表格区域 -->
    <el-table :data="tableData" stripe class="datatable"
              :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="content" label="预约内容" sortable></el-table-column>
      <el-table-column prop="state" label="状态" sortable></el-table-column>
      <el-table-column label="是否已读">
        <template slot-scope="scope">
          {{ scope.row.isRead === "0" ? '未读' : '已读' }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器区域 -->
    <div style="margin: 10px 0">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>


<script>
export default {
  name: "Message",

  // 组件的数据对象
  data() {
    return {
      tableData: [],  // 存储所有的消息数据
      pageNum: 1,   // 当前页码
      pageSize: 5,  // 每页显示的数据条数
      content: '',  // 搜索的内容（未在代码中使用）
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'), // 从本地存储获取用户信息
      ids: [],  // 存储选中的消息 ID 数组
    }
  },

  // 组件创建时调用 load 方法加载数据
  created() {
    this.load()
  },

  // 组件销毁前调用，标记所有消息为已读并更新未读消息计数
  beforeDestroy() {
    this.markAllAsRead()
    this.unReadCountPerUser()
  },

  methods: {
    // 处理表格行选中变化的方法
    handleSelectionChange(rows) {   // 获取当前选中的所有行数据
      this.ids = rows.map(v => v.id)
    },

    // 标记所有消息为已读的方法
    markAllAsRead() {
      this.$request.put('/message/markAllAsRead').then(res => {
        if (res.code === 200) {
          this.$message.success('全部已读')  // 显示成功消息
          this.load()  // 重新加载数据
        }
      })
    },

    // 更新每个用户的未读消息计数的方法（未在代码中使用具体逻辑）
    unReadCountPerUser() {
      this.$request.get('/message/unReadCountPerUser').then(res => {
        // 可能的逻辑处理
      })
    },

    // 加载数据的方法（分页查询）
    load(pageNum) {
      if (pageNum) this.pageNum = pageNum  // 如果传入了页码，则更新当前页码
      this.$request.get('/message/selectByPage', {  // 发送 GET 请求获取分页数据
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          content: '',  // 搜索内容（未使用）
          state: '',  // 状态（未使用）
          isRead: '',  // 是否已读（未使用）
          username: this.user.username,  // 当前用户的用户名
        }
      }).then(res => {
        this.tableData = res.data.records  // 更新表格数据
        this.total = res.data.total  // 更新总数据量
      })
    },

    // 处理分页变化的方法
    handleCurrentChange(pageNum) {
      this.load(pageNum)  // 当前页码变化时重新加载数据
    },

  }
}
</script>


<style scoped>
.message-container{
  background:
      linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), /* 白色半透明遮罩让颜色变淡 */
      url('~@/assets/bg/message.png') center/cover no-repeat;
}
</style>